import React from 'react';
import useStore from '../../components/useStore';

const Reference = () => {
    const { collapsed } = useStore()

    return (
        <div style={{    
            height: "94%", 
            backgroundColor: `#F1F1F1`,
            right: "1%",
            top: "4vh",
            overflow: "hidden",
            width: collapsed ? "94%" : "84%", 
            position: "absolute",  
            color: "white", 
            fontSize: "0.8rem"
        }}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem", 
                    width: "96%", 
                    marginLeft: "2%", 
                    display: "flex",
                    textIndent: "1rem", 
                    justifyContent: "flex-start", 
                    alignContent: "flex-start", 
                    flexWrap: "wrap"
                }}>
                    此页为最简单的页。开发者可在源代码的"src\pages\dev\reference.js"路径找到此页。找到后，
                    将此页代码全选复制到新建页，删除本段文字并修改导出名称后，即可获得一个新的空白页并进行代码编写！
                </div>
            </div>
        </div>
    )
}

export default Reference

var styles = {
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", 
        top: "3%", 
        left: "1%", 
        backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
    },
}